import MyTitle from '@/components/MyTitle'
import React, { FC } from 'react'
import { ProForm, ProFormRadio, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { Col, message, Row, Space } from 'antd';
import { useState } from 'react';
import { reg } from '@/utils/validate';
import { useMobxStore } from '@/mobx/store';
import { observer } from 'mobx-react';
import { Ajax } from '@/api/api';
import _ from 'lodash'
import { ShowError } from '@/utils/message';
import { history } from 'umi';

type LayoutType = Parameters<typeof ProForm>[0]['layout'];
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

const UserAdd: FC<any> = () => {
    const [formLayoutType, setFormLayoutType] = useState<LayoutType>(LAYOUT_TYPE_HORIZONTAL);
    const {
        MyData: {
            roleList,
            userInfo
        }
    } = useMobxStore()
    return (
        <div>
            <MyTitle title='用户新增' ></MyTitle>
            <div className="form-box mt10">
                <ProForm<{
                    phone: string,
                    username: string,
                    password: string,
                    role: number,
                }>
                    initialValues={{
                        password: "qwe123"
                    }}
                    layout={'vertical'}
                    onFinish={async (values) => {
                        console.log(values)
                        let res = await Ajax.adduser(values) as any;
                        if (res.code == 200) {
                            history.push('/main/user/list')
                        }
                    }}
                    onFinishFailed={() => ShowError('添加数据信息有误')}
                    params={{}}

                >
                    <ProFormText
                        width="md"
                        name="username"
                        label="用户名称"
                        placeholder="请输入"
                        rules={[{ required: true, message: '请输入用户名称' }]}
                    />
                    <ProFormText
                        width="md"
                        name="phone"
                        label="手机号码"
                        placeholder="请输入"
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号！',
                            },
                            { pattern: reg.phone, message: '请输入格式正确的手机号' },
                        ]}
                    />
                    <ProFormText.Password
                        disabled
                        width="md"
                        name="password"
                        label="初始密码"
                        placeholder="请输入"
                        tooltip='密码默认为qwe123'
                        rules={[
                            { required: true, message: '请输入密码' },
                            { pattern: reg.pwd, message: '请输入6-16位的数字字母的密码' }
                        ]}
                    />
                    <ProFormSelect
                        width="md"
                        request={async () => {
                            let res = await Ajax.getrolelist() as any;
                            let data = await Ajax.getuserinfo() as any;

                            console.log(userInfo)
                            console.log(userInfo.get('role'))
                            return _.filter(res.result, (item: any) => data.result.role > item.value)
                        }
                        }
                        name="role"
                        label="用户角色"
                        placeholder={'请选择'}
                        rules={[
                            { required: true, message: '请输入选择' },
                        ]}
                    />
                </ProForm>
            </div>
        </div>
    )
}

export default observer(UserAdd)